import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import QueueAnim from 'rc-queue-anim';

import { Icon, Tools, Modal, List } from 'weaver-mobile';
import CreateOrEditGroup from './CreateOrEditGroup';
import { renderLoading, renderNoData } from '../../public/BlogUtils';

const getLabel = Tools.getLabel;
const alert = Modal.alert;

@withRouter
@inject('blogAttentionStore')
@observer
export default class GroupManagement extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-center-attention-group'
  }

  componentWillMount() {
    const { blogAttentionStore: { attentionGroup } } = this.props;
    const { getMyAttentionGroup } = attentionGroup;
    getMyAttentionGroup();
  }
 
  render() {
    const { prefixCls, blogAttentionStore: { attentionGroup, getMyAttentionGroup }, history } = this.props;
    const { groupList, groupLoading, deleteBlogGroup } = attentionGroup;
    return groupLoading ? renderLoading : (
      <div className={prefixCls}>
        <List>
          <List.Item className={`${prefixCls}-new`} onClick={() => history.push('/userCenter/blogAttention/attention/groupManagement/new')}>
            <span><Icon type='plus' size='xxs'/>{getLabel(30131,'新建分组')}</span>
          </List.Item>
          <div className={`${prefixCls}-container`}>
            {
              groupList && groupList.map((item,index) => {
                if (item.groupId !== 'all' && item.groupId !== 'nogroup') {
                  return (<List.Item key={index} className={`${prefixCls}-line`}>
                    <div className={`${prefixCls}-line-title`}>{item.groupName}</div>
                    <div className={`${prefixCls}-line-ops`}>
                      <span onClick={() => history.push(`/userCenter/blogAttention/attention/groupManagement/edit/${item.groupId}`)}><Icon type='editor' size='xxs'/>{getLabel(384116,'编辑')}</span>
                      <span onClick={() => deleteBlogGroup(item.groupId,getMyAttentionGroup)}><Icon type='delete' size='xxs'/>{getLabel(387789,'删除')}</span>
                    </div>
                  </List.Item>)
                } else return '';
              })
            }
          </div>
        </List>
        <Route 
          key="editGroup"
          path="/userCenter/blogAttention/attention/groupManagement/edit/:id"
          breadcrumbName="微博关注-我的关注-分组管理-编辑分组"
          render={() => (
            <div className="wm-route-layout" style={{ position: 'fixed' }}>
              <QueueAnim>
                <CreateOrEditGroup/>
              </QueueAnim>
            </div>
          )}
        />
        <Route 
          key="newGroup"
          path="/userCenter/blogAttention/attention/groupManagement/new"
          breadcrumbName="微博关注-我的关注-分组管理-新建分组"
          render={() => (
            <div className="wm-route-layout" style={{ position: 'fixed' }}>
              <QueueAnim>
                <CreateOrEditGroup/>
              </QueueAnim>
            </div>
          )}
        />
      </div>
    )
  }
}